<template>
  <div class="container">
    <div style="margin-bottom: 40px">
      <span style="color: #ffc3cd; font-size: 12px">说明:目前支持学科和关键字条件筛选</span>
      <span style="float: right">
        <el-button type="success" icon="el-icon-edit" @click="addQuestionsFn"> 新增试题</el-button>
      </span>
    </div>
    <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formData">
      <el-form-item label="学科">
        <el-select @change="catalogueFn" v-model="serviceListA" placeholder="请选择">
          <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select @change="serverFn" v-model="serviceListB" placeholder="请选择">
          <el-option
            v-for="item in catalogueList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select @change="stagsFn" v-model="serviceListC" placeholder="请选择">
          <el-option v-for="item in serviceList" :key="item.value" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="formData.keyword" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select @change="testPaperTypeFn" v-model="serviceListD" placeholder="请选择">
          <el-option
            v-for="item in questionTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select @change="difficultyFn" v-model="serviceListF" placeholder="请选择">
          <el-option
            v-for="item in difficultyList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="formData.direction" placeholder="请选择">
          <el-option v-for="item in directionList" :key="item" :label="item" :value="item"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select @change="creatorFn" v-model="serviceListE" placeholder="请选择">
          <el-option v-for="item in usersList" :key="item.id" :label="item.username" :value="item.username"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="formData.remarks" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="formData.shortName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select style="width: 150px" @change="cityFn" v-model="formData.province" placeholder="请选择">
          <el-option v-for="item in datasList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select style="width: 150px" v-model="formData.city" placeholder="请选择">
          <el-option v-for="item in citysList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 150px">
        <el-button style="width: 70px" @click="restFormFn">清除</el-button>
        <el-button style="width: 70px" type="primary" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>
    <p style="height: 50px; background-color: #f4f4f5; line-height: 50px; color: #909399">
      <i style="margin: 0 15px" class="el-icon-info"></i>数据一共{{ totals }}条
    </p>
    <el-table :data="questionList" stripe style="width: 100%">
      <el-table-column prop="number" label="试题编号"> </el-table-column>
      <el-table-column prop="subject" label="学科" width="100"> </el-table-column>
      <el-table-column prop="catalog" label="目录" width="100"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="80">
        <template slot-scope="scope">
          {{ typeFn(scope.row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="250">
        <template slot-scope="scope">
          {{ delHtmlTag(scope.row.question) }}
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
        <template v-slot="{ row }">
          {{ parseTimeFn(row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度">
        <template v-slot="{ row }">
          {{ diffIsFn(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人"> </el-table-column>
      <el-table-column prop="address" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="previewDialogFn(scope.row)"
            type="primary"
            plain
            size="mini"
            icon="el-icon-view"
            circle
          ></el-button>
          <el-button
            @click="jumpInputFn(scope.row)"
            type="success"
            plain
            size="mini"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="removeFn(scope.row)"
            type="danger"
            plain
            size="mini"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="addSelectedFn(scope.row)"
            type="warning"
            plain
            size="mini"
            icon="el-icon-check"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8, 15, 20]"
        :page-size="query.pageSize"
        background
        layout="sizes, prev, pager, next, jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
      <el-descriptions :column="4" label="mini">
        <el-descriptions-item label="【题型】">{{ previewList.questionType }}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{ previewList.id }}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{ previewList.difficulty }}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{ previewList.tags }}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{ previewList.subjectName }}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{ previewList.directoryName }}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{ previewList.direction }}</el-descriptions-item>
      </el-descriptions>
      <!-- 分割线 -->
      <div style="border-bottom: 1px solid #9a9a9a; margin: 5px 0"></div>
      <el-descriptions :column="1" label="mini">
        <el-descriptions-item label="【题干】">
          <span style="line-height: 1px" v-html="previewList.question"></span>
        </el-descriptions-item>
        <el-descriptions-item :label="previewList.questionType + ' 选项'">
          <span>( 以下选中的选项为正确答案 )</span>
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="previewList.questionType === '单选题'">
        <el-radio
          v-for="(item, index) in optionsList"
          :key="item.id"
          style="display: block; margin-bottom: 10px"
          v-model="radio"
          :label="item.isRight"
          >{{ optionsList[index].title }}</el-radio
        >
      </div>
      <div v-else-if="previewList.questionType === '多选题'">
        <el-checkbox-group v-model="arr">
          <el-checkbox
            v-for="(item, index) in optionsList"
            :key="item.id"
            style="display: block; margin-bottom: 10px"
            :label="item.code"
            >{{ optionsList[index].title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div v-else></div>
      <!-- 分割线 -->
      <div style="border-bottom: 1px solid #9a9a9a; margin: 5px 0"></div>
      <el-descriptions :column="1" label="mini">
        <el-descriptions-item label="【参考答案】"
          ><el-button size="mini" type="danger" @click="show3 = !show3">视频答案预览</el-button></el-descriptions-item
        >
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
      <div>
        <el-collapse-transition>
          <div v-show="show3">
            <div class="transition-box">
              <video width="320" height="240" controls>
                <source src="videoURL" type="video/mp4" />
              </video>
            </div>
          </div>
        </el-collapse-transition>
        <!-- 分割线 -->
        <div style="border-bottom: 1px solid #9a9a9a; margin: 5px 0"></div>
        <el-descriptions :column="1" label="mini">
          <el-descriptions-item label="【答案解析】">
            <span style="line-height: 1px" v-html="previewList.answer"></span>
          </el-descriptions-item>
        </el-descriptions>
        <!-- 分割线 -->
        <div style="border-bottom: 1px solid #9a9a9a; margin: 5px 0"></div>
        <el-descriptions :column="1" label="mini">
          <el-descriptions-item label="【题目备注】">
            <span v-html="previewList.remarks"></span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { simple as subjectsSimpleAPI } from '@/api/hmmm/subjects.js'
import { simple as directorysSimpleAPI } from '@/api/hmmm/directorys.js'
import { simple as tagsSimpleAPI } from '@/api/hmmm/tags.js'
import { list as users } from '@/api/base/users.js'
import {
  direction as directionList,
  difficulty as difficultyArr,
  questionType as questionTypeArr
} from '@/api/hmmm/constants.js'
import { provinces as provincesListFn, citys } from '@/api/hmmm/citys.js'
import { list, detail, choiceAdd, remove } from '@/api/hmmm/questions.js'
import { parseTime } from '@/utils/index.js'
export default {
  data () {
    return {
      formData: {
        // 表单
        subjectID: '', // 学科
        questionType: '', // 试题类型
        remarks: '', // 题目备注
        catalogID: '', // 目录
        difficulty: '', // 难度
        shortName: '', // 企业简称
        tags: '', // 标签名称
        direction: '', // 方向
        city: '', // 企业所在城市
        province: '', // 企业所在地省份
        keyword: '', // 关键字
        creatorID: '' // 录入人
      },
      serviceListA: '', // 当前选中的学科
      serviceListB: '', // 当前选中的目录
      serviceListC: '', // 当前选中的标签
      serviceListD: '', // 当前选中的试题类型
      serviceListE: '', // 当前选中的录入人
      serviceListF: '', // 当前选中的难度
      show3: false, // 控制视频显示/隐藏
      dialogVisible: false, // 控制弹窗显示/隐藏
      topicRemarks: '', // 题目备注
      enterpriseAbbreviation: '', // 企业简称
      subjectList: [], // 学科列表
      catalogueList: [], // 目录列表
      serviceList: [], // 服务目录
      keyword: '', // 关键字
      directionList: [], // 方向
      directionListA: '', // 不知道干啥用的
      questionTypeList: {}, // 试题类型
      difficultyList: {}, // 难度
      datasList: [], // 所有城市城市
      datasListA: [], // 不知道干啥的
      citysList: [], // 城市下面的县级
      citysListA: [], // 不知道干啥的
      usersList: {}, // 录入人列表
      currentPage: 1, // 初始页码
      query: {
        // 页码查询参数
        page: 1, // 页码
        pagesize: 5 // 每页多少条数据
      },
      totals: 0, // 总条数
      questionList: [], // 题库数据列表
      previewList: [], // 预览列表
      optionsList: [], // 选项列表
      radio: '', // 判断是否选中(单选)
      checked: '1', // 判断是否选中(多选)
      checkedList: true, // 判断是否选中的数组(多选)
      checkedCities: [], // 默认选中的数组(多选)
      videoURL: '', // 视频地址
      arr: [], // 多选框的回填数组
      labelPosition: 'right',
      abcd: [] // 不重要的
    }
  },
  async created () {
    this.getSubjectListFn()
    this.directionList = directionList
    this.questionTypeList = questionTypeArr
    this.difficultyList = difficultyArr
    const res = await provincesListFn()
    this.datasList = res
    const resA = await users()
    this.usersList = resA.data
    // 请求所有题库数据总数
    const resC = await list()
    this.totals = resC.data.items.length
    this.getQuestionListFN()
  },
  methods: {
    // 格式化题型
    typeFn (date) {
      if (date === '1') {
        return '单选题'
      } else if (date === '2') {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    // 格式化难度
    diffIsFn (date) {
      if (date === '1') {
        return '简单'
      } else if (date === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 格式化事件
    parseTimeFn (date) {
      return parseTime(date)
    },
    // 重置表单,清空里面的
    restFormFn () {
      this.formData = {
        // 表单
        subjectID: '', // 学科
        questionType: '', // 试题类型
        remarks: '', // 题目备注
        catalogID: '', // 目录
        difficulty: '', // 难度
        shortName: '', // 企业简称
        tags: '', // 标签名称
        direction: '', // 方向
        city: '', // 企业所在城市
        province: '', // 企业所在地省份
        keyword: '', // 关键字
        creatorID: '' // 录入人
      }
      this.getQuestionListFN()
    },
    // 点击新增方法
    addQuestionsFn () {
      console.log(this.previewList)
      this.$router.push('/questions/new') // 跳转试题录入
    },
    // 搜索方法
    async searchFn () {
      const obj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          obj[key] = this.formData[key]
        }
      }
      const res = await list(obj)

      this.questionList = res.data.items
    },
    // 出去后台返回的标签
    delHtmlTag (str) {
      return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/gi, '')
    },
    // 删除基础题库
    async removeFn (date) {
      const obj = {}
      obj.id = date.id
      await remove(obj)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      // 刷新列表
      this.getQuestionListFN()
    },
    // 把基础题库加入精选方法
    addSelectedFn (data) {
      const obj = {}
      obj.choiceState = 1
      obj.id = data.id
      this.$confirm('是否将该题加入精选?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        await choiceAdd(obj)
      })
    },
    // 点击编辑跳转到录入界面方法
    jumpInputFn (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 数据回显的方法
    handleCheckedCitiesChange (value) {
      // const checkedCount = value.length
      // this.checkAll = checkedCount === this.cities.length
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    // 点击弹框出现/预览方法
    async previewDialogFn (data) {
      this.arr = []
      const obj = {}
      obj.id = data.id
      this.dialogVisible = true
      const res = await detail(obj)
      this.previewList = res.data
      this.videoURL = res.data.videoURL
      if (res.data.difficulty === '1') {
        this.previewList.difficulty = '简单'
      } else if (res.data.difficulty === '2') {
        this.previewList.difficulty = '一般'
      } else {
        this.previewList.difficulty = '困难'
      }
      if (res.data.questionType === '1') {
        this.previewList.questionType = '单选题'
      } else if (res.data.questionType === '2') {
        this.previewList.questionType = '多选题'
      } else {
        this.previewList.questionType = '简答题'
      }
      this.optionsList = this.previewList.options

      for (let i = 0; i < this.optionsList.length; i++) {
        for (const key in this.optionsList[i]) {
          if (this.optionsList[i].isRight === 1) {
            this.arr.push(this.optionsList[i].code)
            this.radio = this.optionsList[i].isRight
            this.abcd = key
          }
        }
      }
    },
    // 获取题库列表
    async getQuestionListFN () {
      // 请求题库列表
      const res = await list(this.query)
      this.questionList = res.data.items
    },
    // 每页显示多少条数据
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getQuestionListFN()
    },
    // 页码变化
    handleCurrentChange (val) {
      this.query.page = val
      this.getQuestionListFN()
    },
    // 城市联动事件
    async cityFn (date) {
      const result = await citys(date)
      this.citysList = result
    },
    // 联动服务事件
    serverFn (date) {
      this.catalogueList.filter(async item => {
        if (item.label === date) {
          const obj = {}
          obj.subjectID = item.value
          const res = await tagsSimpleAPI(obj)
          this.serviceList = res.data
          this.formData.catalogID = item.value
        }
      })
    },
    // 联动目录方法
    catalogueFn (date) {
      this.subjectList.filter(async item => {
        if (item.label === date) {
          const obj = {}
          obj.subjectID = item.value
          const res = await directorysSimpleAPI(obj)
          this.catalogueList = res.data
          this.formData.subjectID = item.value
        }
      })
    },
    // 获取学科数据
    async getSubjectListFn () {
      const res = await subjectsSimpleAPI()
      this.subjectList = res.data
      // console.log(this.subjectList)
    },
    // 标签change事件
    stagsFn (date) {
      this.serviceList.filter(async item => {
        if (item.label === date) {
          this.formData.tags = item.value
        }
      })
    },
    // 试卷类型方法
    testPaperTypeFn (date) {
      this.questionTypeList.filter(async item => {
        if (item.label === date) {
          this.formData.questionType = item.value
        }
      })
    },
    // 难度方法
    difficultyFn (date) {
      this.difficultyList.filter(async item => {
        if (item.label === date) {
          this.formData.difficulty = item.value
        }
      })
    },
    // 录入人的方法
    creatorFn (date) {
      this.usersList.filter(async item => {
        if (item.username === date) {
          this.formData.creatorID = item.id
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
}
.el-pagination {
  margin-top: 20px;
}

.transition-box {
  width: 200px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
